<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: device-css"/>
</head>
<body>
<div class="wrapper">

    <div class="row chart-title"></div>
    <div class="row">
        <div class="col-sm-6">
            <canvas id="chart1"></canvas>
        </div>
        <div class="col-sm-6">
            <canvas id="chart2"></canvas>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-6">
            <canvas id="chart3"></canvas>
        </div>
        <div class="col-sm-6">
            <canvas id="chart4"></canvas>
        </div>
    </div>
    <div class="row search-row" id="toolbar">
        <div class="col-sm-12">
            <form id="formId">
                <button type="button" class="btn btn-primary btn-rounded btn-sm"
                        id="view-btn" onclick="scrollToTable()">
                    <i class="fa fa-list"></i>
                </button>
                <input type="text" class="date-input" placeholder="日期" id="date"
                       style="width: 180px; text-align: center; padding-left: 0"
                       name="date" autocomplete="off">
                <input type="hidden" id="beginTime" name="params[beginTime]">
                <input type="hidden" id="endTime" name="params[endTime]">
                <input type="hidden" th:value="${boat.code}" name="boatCode">
                <button type="button" class="btn btn-primary btn-rounded btn-sm" onclick="search()">
                    <i class="fa fa-search"></i>
                </button>
                <button type="button" class="btn btn-warning btn-rounded btn-sm" onclick="resetInput()">
                    <i class="fa fa-refresh"></i>
                </button>
                <button type="button" class="btn btn-success btn-rounded btn-sm" id="download-btn"
                        onclick="openDownloadDialog()">
                    <i class="fa fa-cloud-download"></i>
                </button>
            </form>
        </div>
    </div>
    <div class="col-sm-12" id="table-row">
        <table id="bootstrap-table"></table>
    </div>
</div>

<th:block th:include="include :: device-js"/>
<script th:inline="javascript">
    var msgType = 'radarData';
    var boatCode = [[${boat.code}]];
    var laserStatusTypeDatas = [[${@dict.getType('sys_laser_status')}]];
    var amplifierStatusTypeDatas = [[${@dict.getType('sys_amplifier_status')}]];
    var measurementStatusTypeDatas = [[${@dict.getType('sys_measurement_status')}]];
    let downloadUrl = '/boat/radarData/export';

    function msgGot(object) {
        if (object.type !== msgType || object.data.boatCode !== boatCode) return;

        let data = object.data;
        let label = data.time;
    }

    let y = []
    let horizontalSpeedArr = [];
    let horizontalDirectionArr = [];
    let ratioArr = [];
    let verticalSpeedArr = [];

    let horizontalSpeedChart, horizontalDirectionChart, ratioChart, verticalSpeedChart;
    let hsConfig, hdConfig, rConfig, vsConfig;
    let chartData = {
        labels: [],
        datasets: [{
            label: '',
            data: [],
        }]
    };
    const chartConfig = {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                mode: 'index',
            },
            scales: {
                x: {
                    type: 'linear',
                    grid: {
                        display: false,
                    },
                    ticks: {
                        stepSize: 1,
                    },
                    title: {
                        display: false,
                        text: ''
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(255,255,255,.15)',
                        display: true,
                    },
                    ticks: {
                        stepSize: 0.5,
                    },
                    title: {
                        display: false,
                        text: '距离 km'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false,
                    position: 'top',
                },
                tooltip: {
                    callbacks: {
                        label: function (tooptipItem) {
                            return tooptipItem.yLabel + '个';
                        }
                    }
                },
                title: {
                    display: true,
                    text: 'title'
                }
            }
        },
    };

    var prefix = "/boat/radarData";
    var options = {
        url: prefix + "/list",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "测风雷达",
        showSearch: false,
        showRefresh: false,
        showColumns: true,
        showToggle: false,
        toolbar: 'toolbar',
        singleSelect: true,
        // fixedColumns: true,
        // fixedNumber: 1,
        sortName: 'id',
        sortOrder: 'desc',
        sidePagination: 'server',
        onLoadSuccess: function (data) {
            dataList = data.rows;
            if ($.common.isEmpty(dataList)) dataList = [];
            if (dataList.length === 0) {
                $.modal.msg(currentDate + ' 无数据')
            }
            try {
                prepareData(); // 这里 把通用的clearData 和 initChart全部放进这里
            } catch (e) {
                console.log(e)
            }
        },
        onClickCell: function (field, value, row, $element) {
            showChart(row)
        },
        columns: [
            {
                checkbox: true
            },
            {
                field: 'time',
                title: '数据时间'
            },
            {
                field: 'lng',
                title: '经度',
                visible: false
            },
            {
                field: 'lat',
                title: '纬度',
                visible: false
            },
            {
                field: 'laserStatus',
                title: '激光器状态',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(laserStatusTypeDatas, value);
                },
                visible: false
            },
            {
                field: 'amplifierStatus',
                title: '放大器状态',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(amplifierStatusTypeDatas, value);
                },
                visible: false
            },
            {
                field: 'measurementStatus',
                title: '测量状态',
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(measurementStatusTypeDatas, value);
                },
                visible: false
            },
            {
                field: 'laserPower',
                title: '激光器输出功率'
            },
            {
                field: 'amplifierPower',
                title: '放大器输出功率'
            },
            {
                field: 'laserTemp',
                title: '激光器外壳温度'
            },
            {
                field: 'amplifierTemp',
                title: '放大器外壳温度'
            },
            {
                field: 'moduleTemp',
                title: '模块温度'
            },
            {
                field: 'moduleHumidity',
                title: '模块湿度'
            },
            {
                field: 'inputVoltage',
                title: '输入电压'
            },
            {
                field: 'diskSpace',
                title: '磁盘空间',
                visible: false
            },
        ]
    };
    $.table.init(options);

    function showChart(data) {
        if (data) {
            $('.chart-title').html(data.time)

            y = JSON.parse('[' + data.distanceList + ']')
            horizontalSpeedArr = JSON.parse('[' + data.hspeedList + ']')
            horizontalDirectionArr = JSON.parse('[' + data.hdirectionList + ']')
            ratioArr = JSON.parse('[' + data.ratioList + ']')
            verticalSpeedArr = JSON.parse('[' + data.vspeedList + ']')
        }

        // 共显示信噪比、水平风速、水平风向、垂直风速、垂直风向五个图表
        if (horizontalSpeedChart) {
            hsConfig.data.labels = horizontalSpeedArr;
            hsConfig.data.datasets[0].data = y
            horizontalSpeedChart.update();
        } else {
            hsConfig = JSON.parse(JSON.stringify(chartConfig))
            hsConfig.options.plugins.title.text = '水平风速';
            hsConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '水平风速: ' + tooltipItem.parsed.y + 'km ' + tooltipItem.parsed.x + 'm/s';
            }
            hsConfig.data = {
                labels: horizontalSpeedArr,
                datasets: [{
                    label: '水平风速',
                    data: y,
                    borderColor: BORDER_COLORS[0],
                    backgroundColor: BACKGROUND_COLORS[0]
                }]
            };
            horizontalSpeedChart = new Chart(document.getElementById('chart1'), hsConfig);
        }

        if (horizontalDirectionChart) {
            hdConfig.data.labels = horizontalDirectionArr;
            hdConfig.data.datasets[0].data = y
            horizontalDirectionChart.update();
        } else {
            hdConfig = JSON.parse(JSON.stringify(chartConfig))
            hdConfig.options.plugins.title.text = '水平风向';
            hdConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '水平风向: ' + tooltipItem.parsed.y + 'km ' + tooltipItem.parsed.x + '°';
            }
            hdConfig.data = {
                labels: horizontalDirectionArr,
                datasets: [{
                    label: '水平风向',
                    data: y,
                    borderColor: BORDER_COLORS[1],
                    backgroundColor: BACKGROUND_COLORS[1]
                }]
            };
            horizontalDirectionChart = new Chart(document.getElementById('chart2'), hdConfig);
        }

        if (ratioChart) {
            rConfig.data.labels = ratioArr;
            rConfig.data.datasets[0].data = y
            ratioChart.update();
        } else {
            rConfig = JSON.parse(JSON.stringify(chartConfig))
            rConfig.options.plugins.title.text = '信噪比';
            rConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '信噪比: ' + tooltipItem.parsed.y + 'km ' + tooltipItem.parsed.x + 'dB';
            }
            rConfig.data = {
                labels: ratioArr,
                datasets: [{
                    label: '信噪比',
                    data: y,
                    borderColor: BORDER_COLORS[3],
                    backgroundColor: BACKGROUND_COLORS[3]
                }]
            };
            ratioChart = new Chart(document.getElementById('chart3'), rConfig);
        }

        if (verticalSpeedChart) {
            vsConfig.data.labels = verticalSpeedArr;
            vsConfig.data.datasets[0].data = y
            verticalSpeedChart.update();
        } else {
            vsConfig = JSON.parse(JSON.stringify(chartConfig))
            vsConfig.options.plugins.title.text = '垂直风速';
            vsConfig.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
                return '垂直风速: ' + tooltipItem.parsed.y + 'km ' + tooltipItem.parsed.x + 'm/s';
            }
            vsConfig.data = {
                labels: verticalSpeedArr,
                datasets: [{
                    label: '垂直风速',
                    data: y,
                    borderColor: BORDER_COLORS[4],
                    backgroundColor: BACKGROUND_COLORS[4]
                }]
            };
            verticalSpeedChart = new Chart(document.getElementById('chart4'), vsConfig);
        }
    }

    function prepareData() {
        y = []
        horizontalSpeedArr = [];
        horizontalDirectionArr = [];
        ratioArr = [];
        verticalSpeedArr = [];

        // if (dataList.length === 0) return;
        showChart(dataList[0])
    }

    function windowResizeCallback() {
    }
</script>

</body>
</html>